import React, { useEffect, useState } from 'react';
import axios from 'axios'
// 表格
import { Pagination, Radio, Table, Checkbox, Button, Modal, Form, Input, notification } from 'antd';
import Requirent from '../Purchasemanage/Requirent';
import { requirent_edit } from '../../../tools/lhq/api'
// 导入请求
import { useRequirent } from '../../../hooks/lhqHooks/index'

function Mytable(props) {
    // 存放key
    var [checkbox, setCheckbox] = useState([])
    // 选中项
    var [opt,setOpt] = useState([])
    // 解构
    var { dataSource, columns, pagination, handleClick } = props
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const onSelectChange = (newSelectedRowKeys) => {
        handleClick(newSelectedRowKeys)
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        columnTitle: '选择',
        columnWidth: 45,
    };

    var changestatus = (e) => {
        if (e.target.checked) {
            dataSource.arr.map((item, index) => {
                checkbox.push(item.key)
                onSelectChange(checkbox);
            })
        } else {
            dataSource.arr.map((item, index) => {
                checkbox.pop()
            })
            onSelectChange([]);
        }
    }

    // 对话框
    const [isModalOpen, setIsModalOpen] = useState(false);
    var assign = () =>{
        setIsModalOpen(true)
    }
    
    var footer = () => {
        return (
            <>
                <Checkbox onChange={(e) => changestatus(e)}>全选</Checkbox>
                <Button 
                type="primary" 
                disabled={selectedRowKeys.length == 0} 
                style={{marginRight:"20px"}}
                onClick={assign}
                >指派</Button>
                <Button disabled={selectedRowKeys.length == 0} >撤回</Button>
            </>
        )
    }

    // 供应列表
    var [requirent, setRequirent] = useRequirent()
    const shoAi = () => {
        axios.get('http://localhost:4000/requirent').then(
            res => {
                setRequirent(res.data)
            }
        )
    }

    const onFinish = (values) => {
        opt = []
        setOpt(opt)
        dataSource.arr.map((item)=>{
            var index = selectedRowKeys.indexOf(item.key)
            if (index != -1) {
                opt.push(item)
                setOpt(opt)
            }
        })
        setIsModalOpen(false);

        // 发编辑的请求
        opt.map((item)=>{
            requirent_edit({ id: item.id, launch: values.launch, response:values.response, process:values.process }).then((res) => {
                notification.success({ message: '编辑成功!' });
                setRequirent(res.data)
                shoAi()
                var status = true
                props.handlestatus(status)
            })
        })
        
    };

    const cancel = () => {
        setIsModalOpen(false);
    };

    return (
        <div className='mytable'>
            <Table 
            rowSelection={rowSelection}
            size='middle'
            dataSource={dataSource.arr} 
            columns={columns} 
            pagination={pagination} 
            footer={dataSource.visble ?
            footer
            : null}
            />
            <Modal title="重新指派" open={isModalOpen} footer={null}>
                <Form name="basic" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}initialValues={{ remember: true }} onFinish={onFinish}>
                    <Form.Item label="请购发起人" name="launch">
                        <Input />
                    </Form.Item>
                    <Form.Item label="请购负责人" name="response" >
                        <Input />
                    </Form.Item>
                    <Form.Item label="请购审核人" name="process" >
                        <Input />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit"  style={{marginRight:"20px"}}>
                            确定
                        </Button>
                        <Button type="primary" htmlType="submit" onClick={cancel}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

export default Mytable;